﻿@{
    ViewBag.Title = "会员群体分析";
}
@section headSection{
    <link href="/jedate/skin/gray.css" rel="stylesheet" />
    <script src="/jedate/jedate.js"></script>
    <script src="/Scripts/echarts.js"></script>
    <script src="/Scripts/macarons.js"></script>
}
<div style="width: 100%; height: 100px; margin: 0 auto;">
    @using (Ajax.BeginForm(new AjaxOptions() { OnBegin = "begin", OnComplete = "complete" }))
    {
        <table style="margin:10px auto;">
            <tr>
                <td rowspan="2"><span style="font-size:24px; ">时间区间：</span> </td>
                <td>
                    始:<input class="startdate" id="startdate" name="startdate" type="text" value="2010-01-01 00:00:00" placeholder="请选择" style="color:blue">

                </td>
            </tr>
            <tr>
                <td>
                    终:<input class="enddate" id="enddate" name="enddate" type="text" placeholder="请选择" value="2030-01-01 00:00:00" style="color:blue ">
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="submit" value="查询" />
                </td>
            </tr>
        </table>
    }
</div>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div>
    <div id="gender" style="width: 49%; height: 300px; float:left;"></div>
    <div id="occupation" style="width: 49%; height: 300px; float: right; "></div>
    <div style="clear:both"></div>
    <div id="age" style="width: 100%; height: 350px; margin: 0 auto;"></div>
</div>
<script type="text/javascript">

    jeDate({
        dateCell: "#startdate",
        format: "YYYY-MM-DD hh:mm:ss",
        isinitVal: false,
        isTime: true, //isClear:false,
        minDate: "0000-00-00 00:00:00"
    })
    jeDate({
        dateCell: "#enddate",
        format: "YYYY-MM-DD hh:mm:ss",
        isinitVal: false,
        isTime: true, //isClear:false,
        minDate: "0000-00-00 00:00:00"
    })
</script>

<script type="text/javascript">
    //性别
    var gender = [];
    //性别数据
    var dataGender = [];
    //年龄
    var age = [];
    //年龄数据
    var dataAge = [];
    //职业
    var occupation = [];
    //职业数据
    var dataOccupation = [];

    function getdata(jsonText) {
        //性别
        gender.length = 0;
        //性别数据
        dataGender.length = 0;
        //年龄
        age.length = 0;
        //年龄数据
        dataAge.length = 0;
        //职业
        occupation.length = 0;
        //职业数据
        dataOccupation.length = 0;
        if (typeof (jsonText) == "string") {
            //msgObj = JSON.parse(jsonText);
            try {
                //1.1将字符串 尝试转成 js 对象
                //处理 数组字面量表示法的 json字符串：[{},{}]
                jsonText = eval(jsonText);
            } catch (e) {
                try {
                    //处理 对象字面量表示法的 json字符串:{}
                    jsonText = eval("(" + jsonText + ")");
                } catch (e1) {
                    alert("格式错误：必须为json格式字符串~！");
                }
            }
        }
        var j = 0;
        var k = 0;
        var m = 0;
        for (var i = 0; i < jsonText.length; i++) {
            if (jsonText[i].GenderNumber) {

                gender[j] = jsonText[i].Gender;
                dataGender[j] = { value: jsonText[i].GenderNumber, name: jsonText[i].Gender };
                j++;
            }
            if (jsonText[i].AgeNumber) {

                age[k] = jsonText[i].Age;
                dataAge[k] = { value: jsonText[i].AgeNumber, name: jsonText[i].Age };
                k++;
            }
            if (jsonText[i].OccupationNumber) {

                occupation[m] = jsonText[i].Occupation;
                dataOccupation[m] = { value: jsonText[i].OccupationNumber, name: jsonText[i].Occupation };
                m++;
            }
        }
        myChartGender.setOption({
            legend: {
                data: gender
            },
            series: {
                data: dataGender
            }
        });
        myChartAge.setOption({
            legend: {
                data: age
            },
            series: {
                data: dataAge
            }
        });
        myChartOccupation.setOption({
            legend: {
                data: occupation
            },
            series: {
                data: dataOccupation
            }
        });

    }

    // 基于准备好的dom，初始化echarts实例
    var myChartGender = echarts.init(document.getElementById('gender'), 'macarons');

    // 显示标题，图例和空的坐标轴
    myChartGender.setOption({

        title: {
            text: '会员群体性别分析',
            left: '28%',
            top: 0,
            textStyle: { fontSize: 20 }

        },
        legend: {
            x: '35%',
            y: 'bottom',
            data: null
        },
        tooltip: {
            trigger: 'item',
            //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            formatter: "性别:{b}<br/>人数:{c},占({d}%)"
        },
        toolbox: {
            show: true,
            right: '15%',
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: '会员群体分析',
                type: 'pie',
                radius: '75%',
                center: ['45%', '50%'],
                data: null
            }
        ]
    });


    // 基于准备好的dom，初始化echarts实例
    var myChartAge = echarts.init(document.getElementById('age'), 'macarons');

    // 显示标题，图例和空的坐标轴
    myChartAge.setOption({

        title: {
            text: '会员群体年龄分析',
            left: 'center',
            top: 22,
            textStyle: { fontSize: 20 }

        },
        legend: {
            x: 'center',
            y: 'bottom',
            data: null,
            formatter: '{name}岁'
        },
        tooltip: {
            trigger: 'item',
            //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            formatter: "年龄:{b}岁<br/>人数:{c},占({d}%)"
        },
        toolbox: {
            show: true,
            top: '30',
            right: '30%',
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: '会员群体年龄分析',
                type: 'pie',
                radius: '70%',
                center: ['50%', '56%'],
                data: null
            }
        ]
    });


    // 基于准备好的dom，初始化echarts实例
    var myChartOccupation = echarts.init(document.getElementById('occupation'), 'macarons');

    // 显示标题，图例和空的坐标轴
    myChartOccupation.setOption({

        title: {
            text: '会员群体职业分析',
            left: '28%',
            top: 0,
            textStyle: { fontSize: 20 }

        },
        legend: {
            x: '15%',
            y: 'bottom',
            data: null
        },
        tooltip: {
            trigger: 'item',
            //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            formatter: "职业:{b}<br/>人数:{c},占({d}%)"
        },
        toolbox: {
            show: true,
            right: '15%',
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: '会员群体职业分析',
                type: 'pie',
                radius: '75%',
                center: ['45%', '50%'],
                data: null
            }
        ]
    });


    getdata(@Html.Raw(ViewBag.Colony));


    function begin() {
        //简单的加载动画
        myChartGender.showLoading();
        myChartAge.showLoading();
        myChartOccupation.showLoading();
    }
    function complete(xhrObj) {
        //隐藏加载动画。
        myChartGender.hideLoading();
        myChartAge.hideLoading();
        myChartOccupation.hideLoading();
        getdata(xhrObj.responseText);

    }

</script>
